<template>
  <div class="leave-comment">
    <v-container>
      <v-row justify="center" class="mt-10">
        <v-col cols="12" md="7" xl="7" lg="8" class="rounded white">
          <v-card-title class="mx-2">留言板</v-card-title>
          <p
            class="font-weight-regular subtitle-2 grey--text text--darken-2 mx-6 my-3 nonsense"
          >
            所谓可以不用，但不能没有！<br />
            线下我唯唯诺诺，线上我滔滔不绝；<br />五星上将麦克阿瑟说过：回家过圣诞节；苏联老大哥说过：拉回西伯利亚种土豆；<br />秦始皇说过：
            金字塔自古以来就是西安不可分割的一部分；汉武帝说过：V我50，待我东山再起，封你做大司马大将军；朱棣说过：听叔一句劝，皇宫的水深，你把握不住；<br />
            白胡子说过：做我儿子吧；老爹说过：妖魔鬼怪快离开；<br />C语言说过：我生万物；本贾尼博士说过：我只是熟悉C++；Java说过：我有泛型；<br />你说过：···
          </p>
        </v-col>
      </v-row>
      <v-row justify="center" class="mt-10">
        <v-col cols="12" md="7" xl="7" lg="8" class="white rounded">
          <v-form ref="form">
            <v-container>
              <v-row>
                <v-col cols="12" md="4">
                  <v-text-field
                    v-model="leaveComment.nickname"
                    outlined
                    :counter="50"
                    label="*昵称"
                    required
                    dense
                    :rules="rules.nickname"
                  ></v-text-field>
                </v-col>
                <v-col cols="12" md="4">
                  <v-text-field
                    v-model="leaveComment.email"
                    outlined
                    :counter="200"
                    label="*邮箱"
                    required
                    dense
                    :rules="rules.email"
                  ></v-text-field>
                </v-col>
                <v-col cols="12" md="4">
                  <v-text-field
                    v-model="leaveComment.url"
                    outlined
                    :counter="100"
                    label="网址"
                    dense
                    :rules="rules.url"
                  ></v-text-field>
                </v-col>
              </v-row>
              <v-row dense>
                <v-col cols="12">
                  <v-textarea
                    auto-grow
                    outlined
                    clearable
                    no-resize
                    dense
                    :counter="500"
                    label="*评论"
                    v-model="leaveComment.content"
                    :rules="rules.content"
                  />
                </v-col>
              </v-row>
              <v-row dense>
                <v-col cols="6">
                  <div style="position: relative">
                    <v-btn icon color="success" @click="emojiPickerCloseClick">
                      <v-icon>
                        mdi-emoticon-cool-outline
                      </v-icon>
                    </v-btn>
                    <VEmojiPicker
                      v-show="emojiPickerClose"
                      @click.stop="emojiPickerCloseClick"
                      @select="selectIcon"
                      style="position: absolute;z-index: 3;left: 30px;bottom: 0;"
                    ></VEmojiPicker>
                  </div>
                </v-col>
                <v-col cols="6">
                  <v-btn
                    class="float-right success"
                    :loading="commentLoading"
                    :disabled="commentLoading"
                    @click="submit()"
                    >评论</v-btn
                  >
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </v-col>
      </v-row>
      <v-row justify="center" class="mt-10">
        <v-col cols="12" md="7" xl="7" lg="8" class="grey lighten-4 rounded">
          <v-container>
            <v-list
              dense
              flat
              v-if="leaveComments.length"
              class="grey lighten-4"
            >
              <v-card
                flat
                v-for="data in leaveComments"
                :key="data.id"
                class="ma-2 white rounded"
              >
                <v-list-item dense>
                  <v-list-item-avatar size="45">
                    <v-img src="/bg_1920x1080.jpg"></v-img>
                  </v-list-item-avatar>
                  <v-list-item-content
                    style="padding: 8px 0;align-self: normal;"
                  >
                    <v-list-item-title
                      class="font-weight-bold subtitle-1 black--text"
                      ><span class="mr-3">{{ data.nickname }}</span>
                    </v-list-item-title>
                    <v-list-item-subtitle class="caption pink--text ">{{
                      data.createTime
                    }}</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-card-text
                  class="black--text caption"
                  style="padding: 0 0 0 78px"
                >
                  {{ data.content }}
                </v-card-text>
              </v-card>
            </v-list>
            <p v-else class="text-center pink--text caption">
              快来留言吧！(☆▽☆)
            </p>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
    <br />
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Vue from "vue";
import VEmojiPicker from "v-emoji-picker";
import { addLeaveComment, allLeaveComment } from "@/api/leaveComment";
Vue.use(VEmojiPicker);
export default {
  name: "LeaveComment",
  components: { Footer },
  mounted() {
    this.getLeaveComment();
  },
  methods: {
    getLeaveComment() {
      allLeaveComment().then(res => {
        this.leaveComments = res.data.leaveComments;
      });
    },
    selectIcon(val) {
      this.leaveComment.content += val.data;
      this.emojiPickerClose = false;
    },
    emojiPickerCloseClick() {
      this.emojiPickerClose = !this.emojiPickerClose;
    },
    submit() {
      if (this.$refs.form.validate()) {
        this.commentLoading = true;
        addLeaveComment(this.leaveComment).then(res => {
          if (res.code === 200) {
            this.getLeaveComment();
            this.commentLoading = false;
            this.leaveComment = { content: "" };
            this.$refs.form.reset();
          }
        });
      }
    }
  },
  data() {
    return {
      leaveComments: [],
      snackbar: false,
      emojiPickerClose: false,
      leaveComment: {
        content: ""
      },
      rules: {
        nickname: [
          v => !!v || "昵称不能为空!",
          v => (v && v.trim() !== "") || "昵称不能为空!",
          v => (v && v.length <= 50) || "昵称不能超过50个字符!"
        ],
        email: [
          v => !!v || "邮箱不能为空!",
          v =>
            /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(v) ||
            "请输入正确的邮箱!",
          v => (v && v.length <= 200) || "邮箱不能超过200个字符!"
        ],
        url: [v => !v || v.length <= 100 || "网站地址不能超过100个字符！"],
        content: [
          v => !!v || "评论内容不能为空!",
          v => (v && v.length <= 500) || "评论内容不能超过500个字符!"
        ]
      },
      commentLoading: false
    };
  }
};
</script>

<style scoped>
.leave-comment {
  width: 100%;
  height: 100%;
}
.nonsense {
  line-height: 26px;
}
</style>
